<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        // 第一个问题
        // console.log(1);

        // setTimeout(function() {
        //     console.log(3);
        // }, 1000);

        // console.log(2);

        // 2. 第二个问题   定时器会在触发的时候，放入消息队列
        // console.log(1);

        // setTimeout(function() {
        //     console.log(3);
        // }, 0);

        // console.log(2);

        // 3. 第三个问题,点击或定时器触发时才放入消息队列

        // console.log(1);
        // document.onclick = function () {
        //     console.log('click');
        // }
        // console.log(2);
        // setTimeout(function () {
        //     console.log(3);
        // }, 3000);

        // https://www.processon.com/diagraming/614568cf7d9c08198c56c649
        /* 
    线程 Thread: 执行运算最小单位。一个理发师。
    进程 Process: 一个应用程序(QQ、酷狗、浏览器)一个进程。一个理发店。

    线程和进程关系：
    一个进程可以有很多个线程
    
    JavaScript 语言的一大特点就是单线程，也就是说，同一时间只能做一件事情。
    单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。

    这样所导致的问题是：如果 JS执行的时间过长，这样就会造成页面的渲染不连贯，
    导致页面渲染加载阻塞的感觉。 

    同步和异步:
        为了解决这个问题，利用多核CPU的计算能力，
        HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。
        于是，JS中出现了同步和异步

    同步与异步
            同步交互：指发送一个请求,需要等待返回,然后才能够发送下一个请求，有个等待过程；
            异步交互：指发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待。
        
            同步就相当于是当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。
                当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。
            异步就是，当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率。
    
    同步异步案例
            举个例子来说，一家餐厅吧来了5个客人，同步的意思就是说，来第一个点菜，点了个鱼，好， 厨师去捉鱼杀鱼，过了半小时鱼好了给第一位客人，开始下位一位客人，就这样一个一个来，按顺序来
            相同，
            异步呢，异步的意思就是来第一位客人，点什么，点鱼，给它一个牌子，让他去一边等吧，下一位客人接着点菜，点完接着点让厨师做去吧，哪个的菜先好就先端出来，

    同步任务
        同步任务都在主线程上执行，形成一个执行栈.
    异步任务
        JS的异步是通过回调函数实现的。
        一般而言，异步任务有以下三种类型：
        1、	普通事件，如 click, resize 等
        2、	资源加载，如 load、error 等
        3、	定时器，包括 setInterval, setTimeout 等.
    异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。

    JS执行队列机制
        1. 先执行栈中的同步任务。
        2. 异步任务（回调函数）放入任务队列中。
        3. 一旦执行栈中的所有同步任务执行完毕，
            系统就会按次序读取任务队列中的异步任务，
            于是被读取的异步任务结束，结束等待状态，
            进入执行栈(即放到执行栈的最后)，开始执行。
        4. 类似异步任务放入高速的服务区。

    同步任务执行完毕后，将再次获取任务队列，放入执行栈里，继续执行。
    由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event loop) 
        */
    </script>
</body>

</html>